<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="/css/gm1.css"/>
		<script src="/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<title>登录</title>
	</head>
	<body>
		<!--顶部logo-->

		<header>
			<a href="http://www.baidu.com"><img src="/img/logo.png"/></a><p>欢迎登录</p>
 
		</header>
		
		<div class="top-2">
			<div class="top-2a">
				 
				<p> </p>
			</div>
		</div>
		
		<!--大图-->
		<div class="top-3">
			<div class="img_1">
				<img src="/img/5731485aN1134b4f0.jpg"/>
			</div>
			<div id="sign">
 
				<div class="si_cen">
					<h2 class="act btn1">用户登录</h2>
					 
				</div>
 
				<div class="si_bom1 tab" style="display: block;">
					<div  class="error">
						请输入账户名和密码
					</div>

					<form id="loginForm" action="./login" method="post">
					<ul>
						<li class="top_1">
							<img src="/img/user_03.png" class="err_img1"/>

							<input type="text" id="username" name="username" placeholder=" 邮箱/用户名/已验证手机"  class="user"/>
						</li>
						<li>
							<img src="/img/user_06.png" class="err_img2"/>
							<input type="password" id="password" name="password" placeholder=" 密码" class="password"/>

						</li>
						<li class="bri">
							<a href="">忘记密码</a>
						</li>
						<li class="ent"><button id="btn2" type="button" class="btn2"><a href="javascript:submitLogin();" class="a">登 &nbsp; &nbsp;录</a></button></li>

					</ul>
						<input type="hidden" id="originUrl" name="originUrl" th:value="${originUrl}"/>
					</form>
				</div>
			<div class="si_out">
 
				<h5 class="rig">
						<img src="/img/4de5019d2404d347897dee637895d02b_25.png"/>
						<span><a href="#">立即注册</a></span>
					</h5>
			</div>
			</div>
		</div>

		
		<!--底部-->
		 <input type="text" th:value="${ReturnUrl}" id="ReturnUrl" />
		
	</body>
	<script language="JavaScript">
		
			function submitLogin() {
				var username = $("#username").val();
                var password = $("#password").val();
                $.post("login",{username:username,password:password},function(token){
					// 验证token是否为空或者异常
                 	if(token == "fail"){
                 		alert("用户名或密码错误！");
					}else{
						window.location.href=$("#ReturnUrl").val()+"?token="+token;
					}
				});
            }

			
			var btn2=document.getElementsByClassName('btn2')[0];
			var user=document.getElementsByClassName('user')[0];
			var pass=document.getElementsByClassName('password')[0];
			var err=document.getElementsByClassName('error')[0];

			var err_img1=document.getElementsByClassName('err_img1')[0];

			var err_img2=document.getElementsByClassName('err_img2')[0];
		 
			
			
			
			
			 user.onfocus=function(){
                 
                user.style.border='1px solid #999';

		 }

            pass.onfocus=function(){
                
                pass.style.border='1px solid #999';
            }
            user.onblur=function(){
                 
                user.style.border='1px solid green';
            }
            pass.onblur=function(){
                
                pass.style.border='1px solid green';
            }
	</script>
</html>
